<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>MP TOTP助手 - 设置</title>
  <link rel="stylesheet" href="options.css">
  <style>
    body {
      width: 100%;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      font-family: system-ui, -apple-system, sans-serif;
      background-color: #f5f5f5;
    }
    
    .container {
      background: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      position: relative;
    }
    
    .version-info {
      position: absolute;
      top: 10px;
      right: 20px;
      font-size: 12px;
      color: #666;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .version-badge {
      background-color: #e3f2fd;
      padding: 2px 8px;
      border-radius: 10px;
      color: #0d47a1;
      transition: background-color 0.2s;
    }
    
    .version-badge:hover {
      background-color: #bbdefb;
      cursor: pointer;
    }
    
    .update-available {
      background-color: #ffab91;
      color: #d84315;
      padding: 2px 8px;
      border-radius: 10px;
      cursor: pointer;
      animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
      0% { opacity: 0.7; }
      50% { opacity: 1; }
      100% { opacity: 0.7; }
    }
    
    h1, h2 {
      margin-top: 0;
      color: #1976d2;
    }
    
    h2 {
      font-size: 18px;
      margin: 30px 0 15px;
      display: flex;
      align-items: center;
    }
    
    h2 .badge {
      margin-left: 10px;
      font-size: 12px;
      background: #e3f2fd;
      padding: 2px 8px;
      border-radius: 10px;
      color: #0d47a1;
      font-weight: normal;
    }
    
    .form-group {
      margin-bottom: 15px;
    }
    
    label {
      display: block;
      margin-bottom: 5px;
      color: #666;
    }
    
    input[type="text"], input[type="password"], textarea {
      width: 100%;
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 4px;
      box-sizing: border-box;
    }
    
    .button-group {
      margin-top: 20px;
      display: flex;
      gap: 10px;
    }
    
    button {
      padding: 8px 16px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-weight: 500;
      background: #e0e0e0;
      color: #333;
    }
    
    button:hover {
      opacity: 0.9;
    }
    
    button[type="submit"], #testConnection, #addSite {
      background-color: #1976d2;
      color: white;
    }
    
    #clearSettings {
      background-color: #f44336;
      color: white;
    }
    
    .status {
      margin-top: 15px;
      padding: 10px;
      border-radius: 4px;
      display: none;
    }
    
    .status.success {
      background-color: #e8f5e9;
      color: #2e7d32;
    }
    
    .status.error {
      background-color: #ffebee;
      color: #c62828;
    }
    
    .help-text {
      margin-top: 5px;
      font-size: 12px;
      color: #666;
    }
    
    .important-note {
      background-color: #fff3cd;
      padding: 10px;
      border-radius: 4px;
      margin-bottom: 15px;
      border-left: 4px solid #ffc107;
    }
    
    /* 站点列表样式 - 优化为紧凑的卡片布局 */
    .sites-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
      gap: 12px;
      margin-top: 15px;
    }
    
    .site-card {
      background: #ffffff;
      border-radius: 6px;
      padding: 12px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12);
      position: relative;
      border: 1px solid #e0e0e0;
      transition: all 0.2s ease;
      cursor: move; /* 显示可拖动的光标 */
    }
    
    .site-card:hover {
      box-shadow: 0 3px 6px rgba(0,0,0,0.16);
      transform: translateY(-2px);
    }
    
    .site-card.dragging {
      opacity: 0.5;
      border: 1px dashed #1976d2;
    }
    
    .drag-handle {
      cursor: move;
      color: #666;
      font-size: 16px;
      display: flex;
      align-items: center;
    }
    
    /* 拖拽过程中的样式 */
    .site-card[draggable="true"]:hover {
      cursor: grab;
    }
    
    .site-card[draggable="true"]:active {
      cursor: grabbing;
    }
    
    .site-header {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
    }
    
    .site-icon-sm {
      width: 24px;
      height: 24px;
      border-radius: 4px;
      margin-right: 8px;
      background: #f0f0f0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    
    .site-icon-sm img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    
    .site-name-sm {
      font-weight: bold;
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .site-secret-sm {
      font-family: monospace;
      font-size: 12px;
      color: #666;
      background: #f5f5f5;
      padding: 4px;
      border-radius: 3px;
      margin-bottom: 6px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .site-urls-sm {
      font-size: 11px;
      color: #666;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .site-actions {
      display: flex;
      gap: 5px;
      margin-top: 8px;
    }
    
    .site-actions button {
      padding: 4px 8px;
      font-size: 11px;
      flex: 1;
    }
    
    .icon-group {
      display: flex;
      gap: 10px;
      margin-top: 5px;
      flex-wrap: wrap;
    }
    
    .icon-method {
      flex: 1;
      min-width: 200px;
    }
    
    .export-import-section {
      margin-top: 20px;
      padding: 15px;
      border-top: 1px solid #eee;
      background-color: #f8f9fa;
      border-radius: 6px;
    }
    
    /* 增强备份提示区域的样式 */
    .backup-tip {
      background-color: #fff8e1;
      border-left: 4px solid #ff9800;
      padding: 12px 15px;
      margin: 20px 0;
      border-radius: 0 4px 4px 0;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    
    .backup-tip strong {
      color: #e65100;
      font-size: 16px;
      display: block;
      margin-bottom: 8px;
    }
    
    .backup-tip ul {
      margin: 0;
      padding-left: 20px;
    }
    
    .backup-tip li {
      margin-bottom: 8px;
      line-height: 1.5;
    }
    
    .backup-tip li strong {
      display: inline;
      font-size: inherit;
      color: #d84315;
      margin-bottom: 0;
    }
    
    /* 美化项目推荐区域 */
    .project-promo {
      background-color: #e8f5e9;
      padding: 8px 12px;
      border-radius: 4px;
      margin-top: 10px;
      border-left: 3px solid #4caf50;
    }
    
    .project-promo a {
      color: #2e7d32;
      text-decoration: none;
      font-weight: bold;
    }
    
    .project-promo a:hover {
      text-decoration: underline;
    }
    
    .footer {
      margin-top: 30px;
      text-align: center;
      padding-top: 15px;
      border-top: 1px solid #eee;
      font-size: 12px;
      color: #666;
    }
    
    .footer a {
      color: #1976d2;
      text-decoration: none;
    }
    
    .footer a:hover {
      text-decoration: underline;
    }
    
    .icon-upload {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-top: 5px;
      flex-direction: column;
    }
    
    .icon-preview {
      width: 32px;
      height: 32px;
      border-radius: 4px;
      background-color: #f5f5f5;
      border: 1px dashed #ccc;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    
    .icon-preview img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    
    .icon-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    /* 添加状态信息区 */
    .status-banner {
      margin-bottom: 20px;
      padding: 10px 15px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .status-banner.latest {
      background-color: #e8f5e9;
      border-left: 4px solid #4CAF50;
    }
    
    .status-banner.update {
      background-color: #fff3e0;
      border-left: 4px solid #FF9800;
    }
    
    .status-banner.offline {
      background-color: #f5f5f5;
      border-left: 4px solid #9E9E9E;
    }
    
    .status-banner.error {
      background-color: #ffebee;
      border-left: 4px solid #F44336;
    }
    
    .status-message {
      font-size: 14px;
      font-weight: 500;
    }
    
    .status-action {
      padding: 5px 10px;
      border-radius: 4px;
      border: none;
      cursor: pointer;
      font-size: 12px;
      font-weight: 500;
    }
    
    .status-action.latest {
      background-color: #4CAF50;
      color: white;
    }
    
    .status-action.update {
      background-color: #FF9800;
      color: white;
    }
    
    .status-action.offline {
      background-color: #9E9E9E;
      color: white;
    }
    
    .status-icon {
      margin-right: 8px;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>MP TOTP助手设置</h1>
    
    <div class="version-info">
      <span id="currentVersion">v1.0.0</span>
      <span id="updateNotice" style="display:none">发现新版本</span>
    </div>
    
    <!-- 添加版本状态显示区域 -->
    <div id="version-status-banner" style="display:none" class="status-banner">
      <div class="status-content">
        <span class="status-icon" id="status-icon">✓</span>
        <span class="status-message" id="status-message">当前状态</span>
      </div>
      <button id="status-action" class="status-action">操作</button>
    </div>
    
    <div class="important-note">
      <strong>重要说明：</strong> 请确保输入正确的API密钥。API密钥需要与MP服务器上的API_TOKEN相匹配，否则会出现认证失败的错误。
      <p>本插件使用API直接从MP服务器获取验证码，可以在这里管理站点配置。</p>
    </div>
    
    <h2>服务器连接</h2>
    <div id="status" class="status"></div>
    
    <div class="form-group">
      <label for="baseUrl">MP服务器地址</label>
      <input type="text" id="baseUrl" placeholder="例如: https://mp.example.com:3000">
      <div class="help-text">输入MP服务器的完整地址，包含端口号（如果有）</div>
      <div id="httpWarning" class="warning-message" style="display:none; color:#e65100; background-color:#fff3cd; padding:8px; border-radius:4px; margin-top:8px; border-left:3px solid #ff9800;">
        <strong>⚠️ 警告：</strong> 检测到HTTP连接或局域网地址。在HTTPS页面访问时，右下角验证码小窗口将无法正常工作。建议使用HTTPS连接以获得完整功能。
      </div>
    </div>
    
    <div class="form-group">
      <label for="apiKey">API密钥</label>
      <input type="text" id="apiKey" placeholder="请输入MP服务器的API_TOKEN">
      <div class="help-text">此密钥必须与MP服务器上的<code>API_TOKEN</code>设置完全一致</div>
    </div>
    
    <div class="button-group">
      <button id="testConnection">测试连接</button>
      <button id="clearSettings">清除设置</button>
    </div>
    
    <h2>已配置站点 <span class="badge" id="sitesCount">0个站点</span></h2>
    <div id="sitesList" class="sites-container">
      <!-- 站点列表将通过JavaScript动态添加 -->
      <div class="help-text">连接服务器后，站点列表将显示在这里</div>
    </div>
    
    <h2 id="siteSectionTitle">添加/编辑站点</h2>
    <div class="form-group">
      <label for="siteName">站点名称</label>
      <input type="text" id="siteName" placeholder="例如: Google">
    </div>
    
    <div class="form-group">
      <label for="secret">TOTP密钥</label>
      <input type="text" id="secret" placeholder="例如: JBSWY3DPEHPK3PXP">
      <div class="help-text">Base32编码的TOTP密钥</div>
    </div>
    
    <div class="form-group">
      <label for="urls">站点URL（每行一个）</label>
      <textarea id="urls" rows="2" placeholder="例如: https://accounts.google.com"></textarea>
      <div class="help-text">输入与此验证码关联的网站URL，每行一个</div>
    </div>
    
    <div class="form-group">
      <label for="iconUrl">站点图标选择：</label>
      
      <div class="icon-selection-container">
        <!-- 左侧：图标预览 -->
        <div class="icon-preview-panel">
          <div id="iconPreview" class="icon-preview"></div>
          <div class="icon-source-info">当前来源：<span id="iconSourceText">未设置</span></div>
          <button id="removeIconButton" class="danger-btn" style="display: none;">移除图标</button>
        </div>
        
        <!-- 右侧：图标选择选项 -->
        <div class="icon-options-panel">
          <!-- 选项卡 -->
          <div class="icon-tabs">
            <button class="icon-tab active" data-tab="auto">网站图标</button>
            <button class="icon-tab" data-tab="letter">首字母图标</button>
            <button class="icon-tab" data-tab="url">图标链接</button>
            <button class="icon-tab" data-tab="upload">本地上传</button>
          </div>
          
          <!-- 内容面板 -->
          <div class="icon-panel-container">
            <!-- 自动获取面板 -->
            <div class="icon-panel active" id="auto-panel">
              <p class="panel-desc">从站点URL自动获取网站图标</p>
              <button id="autoFetchIconButton" class="primary-btn">获取网站图标</button>
            </div>
            
            <!-- 首字母图标面板 -->
            <div class="icon-panel" id="letter-panel">
              <p class="panel-desc">使用站点名称的首字母作为图标</p>
              <button id="useLetterIconButton" class="primary-btn">生成字母图标</button>
            </div>
            
            <!-- URL面板 -->
            <div class="icon-panel" id="url-panel">
              <p class="panel-desc">使用自定义图标URL</p>
              <div class="url-input-group">
                <input type="text" id="iconUrl" class="form-control" placeholder="输入图标URL">
                <button id="fetchIconButton" class="primary-btn">获取图标</button>
              </div>
            </div>
            
            <!-- 上传面板 -->
            <div class="icon-panel" id="upload-panel">
              <p class="panel-desc">从本地上传图标文件</p>
              <button id="selectIconButton" class="primary-btn">选择图片文件</button>
              <input type="file" id="iconFile" style="display: none;" accept="image/*">
            </div>
          </div>
        </div>
      </div>
      
      <!-- 状态信息 -->
      <div id="status" class="status" style="display: none;"></div>
    </div>
    
    <div class="button-group">
      <button id="addSite">添加站点</button>
    </div>
    
    <div class="export-import-section">
      <h2>导入/导出配置</h2>
      <div class="button-group">
        <button id="exportConfig">导出配置</button>
        <button id="importConfig">导入配置</button>
        <input type="file" id="importFile" style="display: none;" accept=".json">
      </div>
      
      <div class="backup-tip">
        <strong>⚠️ 重要安全提示 ⚠️</strong> 
        <ul>
          <li><strong>本插件的主要目的</strong>：节省掏出手机打开验证器APP的时间，提高使用体验</li>
          <li><strong>数据安全警告</strong>：请勿仅依赖本插件保存TOTP密钥，这可能导致无法挽回的数据丢失！</li>
          <li><strong>强烈建议</strong>：将相同密钥同时绑定到可靠的手机验证器APP上(如Authy/Google Authenticator)作为最终备份</li>
          <li><strong>定期备份</strong>：使用上方的【导出配置】按钮导出JSON配置文件，并妥善保存</li>
          <li><strong>安全知识</strong>：相同的TOTP密钥在不同的验证器中会生成完全相同的验证码，多处备份不会影响使用</li>
        </ul>
      </div>
    </div>
    
    <div class="footer">
      <p>MP TOTP助手 © 2025 <a href="https://github.com/madrays" target="_blank">madrays</a> | <a href="https://cocohe.cn" target="_blank">博客</a></p>
      <p>简化您的二步验证体验，快速安全地获取TOTP验证码</p>
      <p class="project-promo">🌟 推荐项目：<a href="https://github.com/madrays/sun-panel-helper" target="_blank">SunPanelHelper</a> - 让你的SunPanel锦上添花 | <a href="https://helper.cocoyoo.cn" target="_blank">官方文档</a></p>
    </div>
  </div>
  
  <script src="options.js"></script>
</body>
</html>
